<template>
    <l-layout class="l-tab-page">
        <l-panel style="padding:0;">
            <template #toolLeft >
                <div class="l-panel--item" >
                    <el-input placeholder="请输入主题" @keyup.enter.native="handleSearch"  v-model="keyWord" size="mini" >
                        <el-button @click="handleSearch" slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </div>
            </template>
            <template #toolRight >
                <l-tool-btns @click="handleAdd()" :btnText="$t('写邮件')"  >
                </l-tool-btns>
            </template>
            <l-table ref="mainTable" 
                :loading="tableLoading" 
                :columns="lr_getPageColumns(columns)" 
                :dataSource="tableData"
                :isPage="true"
                :pageTotal="tableTotal"
                :tablePage.sync="tableCurrentPage"
                @loadPageData="turnTablePage"
                >
                <l-table-btns :btns="tableBtns" @click="lr_handleTableBtnClick" ></l-table-btns>
            </l-table>
        </l-panel>
        <!--表单-->
        <l-dialog :title="$t(formTitle)"
                  :visible.sync="formVisible"
                  :height="600"
                  :width="800"
                  @close="handleCloseForm"
                  @opened="handleOpenedForm"
                  ref="dialog"
                  >
            <my-form ref="form"></my-form>
            <template #btns >
                <el-button size="mini" type="warning" @click="saveDrafts" >{{$t('保存草稿')}}</el-button>
                <el-button size="mini" type="primary" @click="sendEmail" >{{$t('发送')}}</el-button>
            </template>
        </l-dialog>
    </l-layout>
</template>
<script>
    const api = window.$api.oa.email
    import myForm from './form'
    export default {
        components: {
            myForm,
        },
        data() {
            return {
                // 查询参数
                keyWord:'',

                // 表格参数
                tableLoading: false,
                tableData:[],
                tableTotal:0,
                tableCurrentPage:1,
                tablePageSize:50,
                columns: [
                    {label:'收件人',prop:'f_AddresssHtml',width:160,align:'left',dataType:'user'},
                    {label:'主题',prop:'f_Theme',minWidth:120,align:'left'},
                    {label:'时间',prop:'f_CreateDate',width:160,align:'left',dataType:'datetime'},
                ],
                tableBtns:[
                    {prop:'Edit',label:'编辑'},
                    {prop:'Delete',label:'删除'},
                ],

                // 表单参数
                formVisible:false,
                formTitle:'',
                formEditRow:null,
                formEdit:false,
            };
        },
        computed: {
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                this.loadTableData()        
            },
            handleSearch(){
                this.loadTableData()
            },
            turnTablePage({rows}){
                this.tablePageSize = rows
                this.loadTableData(true)
            },
            async loadTableData(isNotFirst){
                if(!isNotFirst){
                    this.tableCurrentPage = 1
                }
                this.tableLoading = true
                const queryData = {}
                queryData.type = 2
                queryData.keyword = this.keyWord
                queryData.rows = this.tablePageSize
                queryData.page = this.tableCurrentPage
                queryData.sidx = 'F_CreateDate DESC'
                let data = await this.$awaitWraper(api.getPage(queryData))
                if(data != null){
                    this.tableData = data.rows
                    this.tableTotal = data.records
                }
                else{
                    this.tableData = []
                }
                this.tableLoading = false
            },
            handleAdd(){
                this.formEdit = false
                this.handleShowForm('发送邮箱')
            },
            handleEdit($index,row){
                this.formEdit = true
                this.formEditRow = row
                this.handleShowForm('发送邮箱')
            },

            handleDelete($index,row){
                this.$confirm(this.$t('此操作删除该数据, 是否继续?'), this.$t('提示'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
                }).then(async () => {
                    this.tableData.splice($index,1);
                    this.tableTotal--;
                    await api.cremove(row.f_ContentId,2)
                    this.$message({
                        type: 'success',
                        message: this.$t('删除成功!')
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: this.$t('已取消删除!')
                    })
                })
            },
            handleShowForm(text) {
                this.formTitle = text;
                this.formVisible = true;
            },
            async handleOpenedForm() {
                if (this.formEdit) {
                    let data = await this.$awaitWraper(api.get(this.formEditRow.f_ContentId))
                    if(data){
                        this.$refs.form.setForm(data)
                    }
                }
            },
            handleCloseForm() {
                this.$refs.form.resetForm();
            },


            //保存草稿    
            async saveDrafts() {
                this.$refs.dialog.showLoading('保存草稿中')
                const postData = this.$refs.form.getForm()
                postData.content.f_sendState= 0
                const res  = await  this.$awaitWraper(api.update(this.formEditRow.f_ContentId,postData))
                if(res){
                    this.$message({
                        type: 'success',
                        message: this.$t('草稿修改成功!')
                    })
                    this.loadTableData()
                    this.formVisible = false
                }
                this.$refs.dialog.hideLoading()
            },
            // 发送邮件
            async sendEmail(){
                this.$refs.dialog.showLoading('发送邮件中')
                if (await this.$refs.form.validateForm()) {
                    const postData = this.$refs.form.getForm()
                    postData.content.f_sendState= 1
                    const res = await this.$awaitWraper(api.update(this.formEditRow.f_ContentId,postData))
                    if(res){
                        this.$message({
                            type: 'success',
                            message: this.$t('邮件发送成功!')
                        })
                        this.loadTableData()
                        this.formVisible = false
                    }

                }
                this.$refs.dialog.hideLoading()
            },
        }
    }
</script>